<template>
  <div class="page-operation">
    <el-button type="primary" @click="handleInsertComment">Insert Fictitious Comment</el-button>
  </div>
  <div class="page-filter">
    <el-form inline :disabled="isLoadingCommentList" @submit.pervent="hansleSearch">
      <el-form-item label="Product Name">
        <el-input clearable v-model="categoryListParams.product"></el-input>
      </el-form-item>
      <el-form-item label="Product ID">
        <el-input clearable v-model="categoryListParams.productID"></el-input>
      </el-form-item>
      <el-form-item label="User Name">
        <el-input v-model="categoryListParams.username"></el-input>
      </el-form-item>
      <el-form-item label="Status">
        <el-select v-model="categoryListParams.isReply" placeholder="Please select">
          <el-option value label="All"></el-option>
          <el-option value="1" label="Replied"></el-option>
          <el-option value="0" label="No Reply"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Time">
        <el-date-picker
          unlink-panels
          v-model="categoryListParams.dateRange"
          type="daterange"
          range-separator="To"
          start-placeholder="Start date"
          end-placeholder="End date"
          value-format="YYYY/MM/DD"
          :shortcuts="genTimeShortcuts()"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">Search</el-button>
      </el-form-item>
    </el-form>
  </div>

  <div class="page-container" v-loading="isLoadingCommentList">
    <el-table border :data="commentList">
      <el-table-column label="ID" prop="id" width="100"></el-table-column>
      <el-table-column label="Product" prop="store_name"></el-table-column>
      <el-table-column label="User Name" prop="nickname"></el-table-column>
      <el-table-column label="Rate" prop="score" width="70"></el-table-column>
      <el-table-column label="Comment" prop="comment"></el-table-column>
      <el-table-column label="Comment Images">
        <template #default="{ row }">
          <ImageManager
            readonly
            v-if="row.pics && row.pics.length"
            v-model="row.pics"
            width="30px"
            height="30px"
          />
        </template>
      </el-table-column>
      <el-table-column label="Reply" prop="merchant_reply_content"></el-table-column>
      <el-table-column label="Time" prop="time"></el-table-column>
      <el-table-column label="Action" width="140">
        <template #default="{ row }">
          <el-link type="primary" @click="openReplyDialog(row)">Reply</el-link>
          <el-divider direction="vertical"></el-divider>
          <el-popconfirm
            title="It cannot be restored after deletion. Are you sure you want to delete it ?"
            @confirm="handleDelComment(row)"
          >
            <template #reference>
              <el-link type="danger">Delete</el-link>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <Pagination
      v-model:index="categoryListParams.page"
      v-model:size="categoryListParams.limit"
      :total="commentCount"
      :on-change="handleGetCommentList"
    />
    <Edit v-model="editVisible" @submit="handleGetCommentList" />

    <el-dialog v-model="replyVisible" title="Reply">
      <el-input type="textarea" v-model="replyText"></el-input>
      <template #footer>
        <el-button @click="replyVisible = false">Cancel</el-button>
        <el-button type="primary" @click="handleReplyComment">Confirm</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import ImageManager from '@/components/image-manager/index.vue'

import { getProductCommentList, replyComment, delComment } from '@/api/product'
import { useRoute, useRouter } from 'vue-router'

import Edit from './edit.vue'

const isLoadingCommentList = ref(false)

const categoryListParams = ref({
  product: '',
  isReply: '',
  dateRange: [],
  username: '',
  productID: '',

  page: 1,
  limit: 10,
})

const route = useRoute()

watch(
  () => route.query.id,
  val => {
    if (val) {
      categoryListParams.value.productID = val.toString()
    }
    handleGetCommentList()
  },
  {
    immediate: true,
  }
)

const commentList = ref<ProductCommentType[]>([])
const commentCount = ref(0)

const router = useRouter()

function hansleSearch() {
  router.push({
    query: {},
  })

  handleGetCommentList()
}

function handleGetCommentList() {
  isLoadingCommentList.value = true

  getProductCommentList({
    is_reply: categoryListParams.value.isReply,
    data: categoryListParams.value.dateRange?.join('-'),
    store_name: categoryListParams.value.product,
    account: categoryListParams.value.username,
    product_id: categoryListParams.value.productID,
    page: categoryListParams.value.page,
    limit: categoryListParams.value.limit,
  })
    .then(({ list, count }) => {
      commentList.value = list
      commentCount.value = count
    })
    .finally(() => {
      isLoadingCommentList.value = false
    })
}

function genTimeShortcuts() {
  const now = new Date()

  return [{
    text: 'Today',
    value: [now, now]
  },
  {
    text: 'Last week',
    value: [new Date(now.getTime() - 3600 * 1000 * 24 * 7), now]
  },
  {
    text: 'Last month',
    value: [new Date(now.getTime() - 3600 * 1000 * 24 * 30), now]
  },
  {
    text: 'Last 3 months',
    value: [new Date(now.getTime() - 3600 * 1000 * 24 * 90), now]
  },]
}

const editVisible = ref(false)

function handleInsertComment() { editVisible.value = true }

function handleDelComment({ id }: ProductCommentType) {
  delComment(id)
    .then(() => {
      handleGetCommentList()
    })
}

const replyVisible = ref(false)
const replyText = ref('')
const replyCommentID = ref('')

function handleReplyComment() {
  replyComment(replyCommentID.value, { content: replyText.value })
    .then(() => {
      handleGetCommentList()
      replyText.value = ''
      replyVisible.value = false
    })
}

function openReplyDialog({ id }: ProductCommentType) {
  replyCommentID.value = id.toString()
  replyText.value = ''
  replyVisible.value = true
}
</script>
